<template>
  <div class="Detail">
    <div class="detail_title">订单详情</div>
    <div class="basic_info_water">
      <div class="basicInfo_title">基础信息</div>
      <div class="basic_Info_item">
        <el-row>
          <el-col :span="8">
            <div class="item_list1">
              <div>订单编号:{{ OrderDetail.orderNo }}</div>
              <div>开房员工:{{ OrderDetail.receiveUserName }}</div>
              <div>消费门店:{{ OrderDetail.storeName }}</div>
              <div>
                消费客户:
                <span style="color: #0079fe">{{ OrderDetail.custName }}</span>
              </div>
              <div>订单金额:￥{{ OrderDetail.orderMoney }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item_list2">
              <div>订单状态:{{ OrderDetail.orderStatusStr }}</div>
              <div>创建时间:{{ OrderDetail.orderOpen }}</div>
              <div>消费房间:{{ OrderDetail.roomName }}</div>
              <div>关单时间:{{ OrderDetail.orderClose }}</div>
              <!-- <div>实付金额:￥{{OrderDetail.orderMoneyReal  }}</div> -->
              <div>客户数:{{ OrderDetail.custCount }}</div>
              <div>实付金额:￥{{ OrderDetail.orderMoneyReal }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item_list3">
              <div>订单来源:{{ OrderDetail.orderSourceTypeStr }}</div>
              <div>进店方式:{{ OrderDetail.inStoreTypeStr }}</div>
              <div>客户类型:{{ OrderDetail.custTypeStr }}</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 订单信息 -->
      <div class="order_list_table">
        <div class="order_title">订单信息</div>
        <div class="order_table_list">
          <el-table :data="serverList" stripe style="width: 100%">
            <el-table-column
              prop="roomName"
              label="消费房间"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="contentTypeStr"
              label="消费类型"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="contentName"
              label="消费内容"
            ></el-table-column>
            <el-table-column prop="userName" label="服务技师"></el-table-column>
            <el-table-column prop="serverPrice" label="单价"></el-table-column>
            <el-table-column prop="serverCount" label="数量"></el-table-column>
            <!-- <el-table-column prop="prePrice" label="优惠信息"></el-table-column> -->
            <el-table-column
              prop="serverPriceSum"
              label="小计"
            ></el-table-column>
            <el-table-column prop="handDeduct" label="扣除手工">
              <template slot-scope="scope">
                {{ handDeductObj[scope.row.handDeduct] }}
              </template>
            </el-table-column>
            <el-table-column prop="prePrice" label="免单">
              <template slot-scope="scope">
                <div v-if="scope.row.preType === 'O'">
                  {{ scope.row.prePrice }}
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="clockTimeUp"
              label="上钟时间"
              width="150px"
            ></el-table-column>
            <el-table-column
              prop="clockTimeDown"
              label="下钟时间"
              width="150px"
            ></el-table-column>
            <el-table-column
              prop="serverStatusStr"
              label="服务状态"
            ></el-table-column>
            <el-table-column
              prop="clockTypeStr"
              label="上钟类型"
            ></el-table-column>
            <el-table-column
              prop="payTypeStr"
              label="支付方式"
            ></el-table-column>
            <el-table-column prop="payStatus" label="结算状态">
              <template slot-scope="scope">
                {{ payStatusObj[scope.row.payStatus] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 卷码信息 -->
      <div class="order_list_table">
        <div class="order_title">卷码信息</div>
        <div class="order_table_list">
          <el-table :data="orderMinorCards" stripe style="width: 100%">
            <el-table-column
              prop="minorCardName"
              label="渠道类型"
            ></el-table-column>
            <el-table-column prop="itemName" label="项目"></el-table-column>
            <el-table-column
              prop="minorCardMoney"
              label="实收金额"
            ></el-table-column>
            <el-table-column
              prop="minorCardNo"
              label="优惠券码"
            ></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 支付信息 -->
      <div class="pay_list_table">
        <div class="pay_title">支付信息</div>
        <div>
          <div class="pay_info">
            <div>订单金额</div>
            <div>{{ OrderDetail.orderMoney }}</div>
            <!-- <div>优惠金额</div>
            <div>{{ OrderDetail.orderMoneyPre }}</div> -->
            <!-- <div>抵扣金额</div>
            <div>{{ OrderDetail.moneyCard }}</div>
            <div>抵扣实收</div>
            <div>{{ OrderDetail.moneyCardReal }}</div> -->
            <div>应收金额</div>
            <div>{{ OrderDetail.moneyWant }}</div>
            <div>实收金额</div>
            <div>{{ OrderDetail.orderMoneyReal }}</div>
            <div>优惠金额</div>
            <div>{{ OrderDetail.orderMoneyPre }}</div>
            <!-- <div>待收金额</div>
            <div>{{ OrderDetail.moneyWait }}</div> -->
            <!-- <div>团购优惠</div>
            <div>{{ OrderDetail.moneyChannel }}</div>
            <div>团购实付</div>
            <div>{{ OrderDetail.moneyChannelReal }}</div> -->
          </div>
          <div class="pay_infos">
            <div>微信金额</div>
            <div>{{ OrderDetail.moneyWx }}</div>
            <div>现金</div>
            <div>{{ OrderDetail.moneyRmb }}</div>
            <!-- <div>抵扣金额</div>
            <div>{{ OrderDetail.moneyCard }}</div> -->
            <!-- <div>抵扣实收</div>
            <div>{{ OrderDetail.moneyCardReal }}</div> -->
            <div>支付宝</div>
            <div>{{ OrderDetail.moneyZfb }}</div>
            <div>POS收款</div>
            <div>{{ OrderDetail.moneyPos }}</div>
            <div>会员卡收款</div>
            <div>{{ OrderDetail.moneyMember }}</div>
            <div>美团收款</div>
            <div>{{ OrderDetail.moneyChannelReal }}</div>
          </div>
        </div>

        <div class="pay_table_list">
          <el-table :data="payDOList" stripe style="width: 100%">
            <el-table-column prop="payNo" label="支付单号"></el-table-column>
            <el-table-column prop="" label="关联单号"></el-table-column>
            <el-table-column prop="itemStr" label="支付项目"></el-table-column>
            <el-table-column prop="payReal" label="支付金额"></el-table-column>
            <el-table-column
              prop="createTime"
              label="支付时间"
            ></el-table-column>
            <el-table-column prop="payType" label="支付方式"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getOrderId } from "@/api/business/order";
export default {
  name: "EryuoaStoreFrontendOrderDetail",

  data() {
    return {
      OrderDetail: {},
      payDOList: [],
      serverList: [],
      orderMinorCards: [],

      // serverStatusObj: {
      //   N: "待上钟",
      //   l: "进行中",
      //   F: "已下钟",
      //   C: "退单",
      // },

      payStatusObj: {
        Y: "已结算",
        N: "未结算",
      },
      handDeductObj: {
        Y: "扣除",
        N: "不扣除",
      },
    };
  },

  created() {
    let orderId = this.$route.query.orderId;
    this.getList(orderId);
  },

  mounted() {},

  methods: {
    getList(orderId) {
      this.loading = true;
      getOrderId({ orderId: orderId })
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.OrderDetail = data;
            this.payDOList = data.payDOList;
            this.serverList = data.serverList;
            this.orderMinorCards = data.orderMinorCards;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.Detail {
  background-color: #fff;
  margin: 24px;
  .detail_title {
    font-size: 20px;
    font-weight: bolder;
    padding: 24px;
  }
  .basic_info_water {
    .basicInfo_title {
      padding-left: 24px;
      font-size: 15px;
      font-weight: bolder;
    }

    .basic_Info_item {
      padding-left: 24px;
      padding-top: 20px;
      .item_list1 {
        div {
          margin-bottom: 10px;
        }
      }
      .item_list2 {
        div {
          margin-bottom: 10px;
        }
      }
      .item_list3 {
        div {
          margin-bottom: 10px;
        }
      }
    }

    .order_list_table {
      .order_title {
        padding-left: 24px;
        font-size: 15px;
        font-weight: bolder;
        margin-top: 10px;
      }
      .order_table_list {
        margin: 15px 24px;
      }
    }

    .pay_list_table {
      margin-top: 40px;
      padding-bottom: 30px;
      .pay_title {
        padding-left: 24px;
        font-size: 15px;
        font-weight: bolder;
        margin-top: 10px;
      }
      .pay_info {
        width: 800px;
        display: flex;
        margin: 10px 24px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        div {
          border-right: 1px solid #ccc;
          width: 100px;
          text-align: center;
        }
      }
      .pay_infos {
        width: 1200px;
        display: flex;
        margin: -11px 24px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        div {
          border-right: 1px solid #ccc;
          width: 100px;
          text-align: center;
        }
      }
      .pay_table_list {
        margin: 24px;
      }
    }
  }
}
</style>